<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
        <style>
            html, body{
                margin: 0;
                padding: 0;
            }
            .img{
                width: 400px;
                height: 400px;
                object-fit: cover;
            }
            .btns{
                position: fixed;
                left: 0;
                right: 0;
                gap: 20px;
                bottom: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        </style>
	</head>
	<body>
		<img src="https://img1.baidu.com/it/u=2964205332,196518142&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" class="img" />
        <div class="btns">
            <button onclick="change(true)">+</button>
            <button onclick="change(false)">-</button>
        </div>
		<script>
			function scaleImage(imgElement, centerX, centerY, scale) {
				// 获取图片的原始宽度和高度
				const originalWidth = imgElement.width;
				const originalHeight = imgElement.height;

				// 计算缩放后的宽度和高度
				const newWidth = originalWidth * scale;
				const newHeight = originalHeight * scale;

				// 设置图片的宽度和高度
				imgElement.style.width = `${newWidth}px`;
				imgElement.style.height = `${newHeight}px`;

				// 设置图片的left和top属性，使其以缩放中心点为基准进行定位
				imgElement.style.left = `${centerX - newWidth / 2}px`;
				imgElement.style.top = `${centerY - newHeight / 2}px`;
			}

			// 示例用法
			const imgElement = document.querySelector("img");
			

            function change(isAdd){
                if(isAdd){
                    const centerX = 200;
                    const centerY = 200;
                    const scale = 1.5;
                    scaleImage(imgElement, centerX, centerY, scale);
                }
                else{
                    const centerX = 200;
                    const centerY = 200;
                    const scale = 0.5;
                    scaleImage(imgElement, centerX, centerY, scale);
                }
            }
		</script>
	</body>
</html>
